<template>
  <div class="box">
    <div class="title">
      <div class="titleL">
        <slot name="title">{{ title }}</slot>
      </div>
      <div class="titleR">
        <slot name="topRight"></slot>
      </div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});
</script>
<style scoped>
.box {
  background-image: url("/public/bian.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  padding: 10px 0px;
  display: flex;
  flex-direction: column;
}
.title {
  display: flex;
  display: flex;
  /* background-color: aquamarine; */
}
.titleR {
  flex: 1;
  display: flex;
  justify-content: end;
  margin-right: 10px;
  align-items: center;
  color: #fff;
}
.titleL {
  background-image: url("/public/boxTitle.png");
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 20px;
  color: aliceblue;
  height: 24px;
  padding-left: 10px;
  min-width: 100px;
}
.content {
  flex: 1;
  padding: 10px;
  color: #fff;
  /* background-color: aqua; */
}
</style>